import React from 'react'
import { NoteWithRelations } from '../types/serviceTypes.ts'
import { Link } from 'react-router-dom'
import { USER_HOME } from '../../../apps/user/router/config.ts'
import { Avatar, Skeleton } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { TimeAgo } from '../../../base/components'

interface AuthorCardProps {
  note?: NoteWithRelations
  isLoading?: boolean
}

const AuthorCard: React.FC<AuthorCardProps> = ({ note, isLoading }) => {
  if (isLoading || !note) {
    return (
      <div className="flex gap-3">
        <Skeleton.Avatar active size={36} />
        <div className="flex flex-col gap-1">
          <Skeleton.Input active size="small" style={{ width: 100 }} />
          <Skeleton.Input active size="small" style={{ width: 80 }} />
        </div>
      </div>
    )
  }

  // 安全访问 author 对象
  const author = note.author
  const userId = author?.userId ?? 0
  const username = author?.username ?? '用户已注销'
  const avatarUrl = author?.avatarUrl
  return (
    <div className="flex gap-3">
      <Link to={`${USER_HOME}/${userId}`}>
        <Avatar
          src={avatarUrl}
          className={(!avatarUrl ? 'bg-grey-500' : '') + ' cursor-pointer'}
          size={36}
          icon={<UserOutlined />}
        />
      </Link>
      <div className="text-sm text-neutral-800">
        <Link to={`${USER_HOME}/${userId}`}>
          <div className="font-medium">{username}</div>
        </Link>
        <div className="text-xs text-gray-500">
          <TimeAgo datetime={note.createdAt} />
        </div>
      </div>
    </div>
  )
}

export default AuthorCard
